<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/vue-2.4.0.js"></script>
    <link href="lib/bootstrap-3.3.7.css" rel="stylesheet"/>
</head>
<body>

<div id="app">
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">添加品牌</h3>
        </div>
        <div class="panel-body form-inline">
            <label>
                ID:
                <input type="text" class="form-control" v-model="id"/>
            </label>

            <label>
                Name:
                <!--<input type="text"  class="form-control" v-model="name" @keyDown.enter="add"/>-->
                <input type="text"  class="form-control" v-model="name" @keyDown.f2="add"/>
            </label>

            <!--在vue中，使用事件绑定机制，为元素指定处理函数的时候，如果加了括号，就可以给函数传递参数-->
            <input type="button" value="添加" class="btn btn-primary" @click="add()"/>

            <label>
                搜索关键字:
                <input type="text"  class="form-control" v-model="keywords" id="search"  v-focus/>
            </label>
        </div>
    </div>

    <table class="table table-striped table-bordered table-hover">
        <thead>
        <tr>
            <th>ID</th>
            <th>品牌</th>
            <th>时间</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <!--
        之前  v-for 中的数据都是从 data 上的 list 中直接渲染过来的

        现在，我们自定义了一个search 方法，同时   把所有的关键字，通过传参的形式，传递给了search 方法

        在search 方法内部，通过执行 for 循环，把所有的符合 搜索关键字的数据，保存到 一个新数组中，返回
        -->
        <tr v-for="item in search(keywords)" :key="item.id">
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td>{{ item.time | times}}</td>
            <td>
                <!--.prevent阻止默认行为  刷新的行为-->
                <a href="#" @click.prevent="del(item.id)">删除</a>
            </td>
        </tr>
        </tbody>
    </table>
</div>

<div id="app2">
    <h3 v-color = "'pink'" v-fontweight = "900" v-fontsize = "50">{{ dt |  dataFormat}}</h3>
    <!--<h3 v-color = "'pink'" v-fontweight = "900" v-fontsize = "50">{{ dt |  dataFormat}}</h3>-->
    <h3 v-fontsize="30">32445</h3>
</div>


<script>

    //自定义键盘中按键修饰符
    Vue.config.keyCodes.f2 = 113;

    Vue.filter('times', function (dataStr) {
        //根据给定的时间字符串，得到特定的时间
        var dt = new Date(dataStr);
        console.log(dt);
        var y = dt.getFullYear();
        var m = dt.getMonth() + 1;
        var d = dt.getDate();

        return y+ '-' + m +'-' + d;
//        return `{y}-{m}-{d}`;

    });

    //自定义方法    使用Vue.directive()定义全局的指令   v-focus
    //其中： 参数1： 参数的名称  注意  在定义的时候，指令的名称前面，不需要加  v- 前缀
    //但是： 在调用的时候，必须在指令的名称前面加上 v- 前缀进行调用
    //参数2： 是一个对象，这个对象身上，有一些指令相关的函数，这些函数可以在特定的阶段，执行相关的操作
    Vue.directive('focus',{
        bind: function (el) {//每当指令绑定到元素上的时候，会立即执行这个bind函数，只会执行一次
            //注意：在每个函数中 第一个参数，永远是 el，表示 被绑定了指令的那个元素。这个el参数，是一个原生的JS对象
            //在元素 刚绑定了指令的时候，还没有 插入到 DOM中去，这时候，调用focus方法没有用
            //因为一个元素，只有插入到DOM之后，才能获取焦点
//            el.focus();
        },
        inserted: function (el) {//inserted  表示元素 插入到DOM中的时候，会执行 inserted 函数【执行一次】
            // 聚焦元素
            el.focus()
        },
        update: function () {//当VNode更新的时候，会执行 update 可能会触发多次
        },
        componentUpdated: function () {},
        unbind: function () {}
    });

    //vue里面全部用ES6的写法  -------在这里面就必须特别注意  this  的作用域
        var vm = new Vue({
            el:'#app',
            data:{
                id:'',
                name:'',
                keywords:'',
                list:[
                    {id:1, name:'宝马' ,time: new Date()},
                    {id:2, name:'奔驰' ,time: new Date()}
                ]
            },
            methods:{
                add:function (){
                    this.list.push({id: this.id, name: this.name, time: new Date()}),
                            //清空输入框
                            this.id=this.name=''
                },
                del:function (id) {
                    //分析：
                    //1.如如何根据id，找到要删除这一项的索引
                    //2.如果找打索引了直接调用数组删除方法

                    //遍历
                    //this   的作用域一定要注重
                    var that = this;
                    this.list.some(function (item,i) {
                        if(item.id == id){
                            that.list.splice(i,1);
                            return true

                        }
                    })
                },
                search:function (keywords) {
                    //定义一个新的数组
                    var newList = [];

//                注意：forEach some fiter findIndex  这些都属于数组的新方法 都会对数组中的每一项，进行遍历  执行相关的操作
//                遍历数组，查找符合关键字的组成新的数组  并返回
                    this.list.forEach(function (item) {
                        //匹配关键字
                        //indexOf()用来检索指定的字符串值在字符串中首次出现的位置。  查找不到就显示-1
                        // 它可以接收两个参数，searchvalue表示要查找的子字符串，fromindex表示查找的开始位置，省略的话则从开始位置进行检索。
                        //keywords 可以是参数  也可以是空参  空参的话就会把所有的信息全部展示出来
                        if (item.name.indexOf(keywords) != -1) {
//                        push() 方法可向数组的末尾添加一个或多个元素
                            newList.push(item);
                        }
                    });
//                var newList = this.list.filter(function (item) {
//                    if(item.name.includes(keywords)){
//                        return item;
//                    }
//                });

                    return newList;
                }
            }
        });


    //获取焦点   vue不喜欢这样做
    //    document.getElementById('search').focus();

    Vue.directive('color',{
        bind: function (el,binding) {//每当指令绑定到元素上的时候，会立即执行这个bind函数，只会执行一次
            //注意：在每个函数中 第一个参数，永远是 el，表示 被绑定了指令的那个元素。这个el参数，是一个原生的JS对象
            //在元素 刚绑定了指令的时候，还没有 插入到 DOM中去，这时候，调用focus方法没有用
            //因为一个元素，只有插入到DOM之后，才能获取焦点
//            el.focus();

            el.style.color = binding.value;

        },
        inserted: function (el) {//inserted  表示元素 插入到DOM中的时候，会执行 inserted 函数【执行一次】
            // 聚焦元素
            el.focus()
        },
        update: function () {//当VNode更新的时候，会执行 update 可能会触发多次
        },
        componentUpdated: function () {},
        unbind: function () {}
    });
    var vm2 = new Vue({
        el:'#app2',
        data:{
            dt : new Date()
        },
        methods:{},

        //定义私有过滤器   过滤器有两个  条件   【过滤器名称   和   处理函数】
        //过滤器调用的时候，采用的是就近原则， 如果有私有私有过滤器和全局过滤器名称一致了，这时候  优先调用私有过滤器
        filters:{
            dataFormat: function (dataStr) {
                //根据给定的时间字符串，得到特定的时间
                var dt = new Date(dataStr);
                console.log(dt);
                var y = dt.getFullYear();
                var m = dt.getMonth() + 1;
                var d = dt.getDate();

                return y+ '-' + m +'-' + d +'======';
            }

        },

        //自定义私有指令
        directives:{
            'fontweight' :{
                bind: function (el,binding) {
                    el.style.fontWeight = binding.value
                }
            },
            'fontsize':function (el,binding) {  //  注意： 这个function 等同于  把代码  写到了 bind  和  update   中去
                el.style.fontsize = parseInt(binding.value) + 'px';
                console.log(el.style.fontsize);
            }
        }

    });

</script>
</body>
</html>